@import "~jsoneditor/dist/jsoneditor.min.css";
@import "mock.css";

body, html {
    font-size: 10px;
    height: 100%;
    margin: 0 auto;
    font-family: PingFang SC, Pingfang, Helvetica Neue, Microsoft YaHei, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    color: #282828;
    letter-spacing: .02rem;
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

body.no-scroll {
    overflow: hidden;
}

body * {
    font-size: 1.4rem;
}

article, aside, blockquote, body, button, code, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
}

.align-left {
    text-align: left !important;
}

.align-center {
    text-align: center !important;
}

.align-right {
    text-align: right !important;
}

.display-inline-block {
    display: inline-block !important;
}

.icon svg {
    width: 2rem;
    vertical-align: sub;
    margin-right: 0.5rem;
}

.doc-li .icon svg {
    width: 1.5rem;
}

.table {
    width: 100%;
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
    overflow: auto;
}

.table thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

.table tr {
    background-color: #fff;
    border-top: 0.1rem solid #ccc;
}

.table th {
    font-weight: normal;
}

.table td, .table th {
    padding: 0.3rem 1.3rem;
    border: 0.1rem solid #ddd;
    font-size: 1.6rem;
    max-width: 30rem;
    word-break: break-all;
    line-height: 3rem;
}

.md table tr th {
    background-color: #e8e8e8;
}

.table tr:nth-child(odd) {
    background: #F3F6F7
}

.table.editable-table th {
    font-size: 1.4rem;
    color: #666666;
    padding: 0.2rem 0;
    line-height: 3rem;
}

.table.editable-table td {
    padding: 0;
    line-height: 0;
}

.table.editable-table td > input {
    width: 100%;
    line-height: 3rem;
    color: #666666;
    border: 0;
    border-radius: 0;
}
.table.editable-table td > input[type="checkbox"] {
    margin-right: 10px;
    vertical-align: middle;
}

.table.editable-table td > input[readonly] {
    background-color: #EEEEEE;
}

.table.editable-table td > input.error {
    background-color: #FF000050;
}

.table .icon {
    font-size: 2rem;
}

blockquote {
    border: 0.1rem solid #ddd;
    border-left: 0.6rem solid #dddddd;
    line-height: 2.5rem;
    padding-left: 1.6rem;
    margin: 1rem 0;
    color: #999;
    font-size: 1.6rem;
}

pre {
    font-size: 1.6rem;
}

.clear-both {
    clear: both;
}

.close {
    float: right;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 0.1rem 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

.alert {
    padding: 1.26rem 1.5rem;
    margin-bottom: 2rem;
    border: 0.1rem solid transparent;
    border-radius: 0.4rem;
    font-size: 1.4rem;
}

.alert > .close {
    cursor: pointer;
    margin-left: 1rem;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.text-info {
    color: #31708f;
}

.text-warning {
    color: #8a6d3b;
}

.text-error {
    color: #a94442;
}

#app-body {
    overflow-x: hidden;
}

.hide, .hidden {
    display: none;
}

.btn {
    line-height: 1.499;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid #d9d9d9;
    white-space: nowrap;
    padding: 0 15px;
    font-size: 14px;
    border-radius: 4px;
    height: 32px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    position: relative;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .015);
    color: rgba(0, 0, 0, .65);
    background-color: #fff;
}

.btn:hover {
    color: #40a9ff;
    border-color: #40a9ff;
}

.btn:focus {
    outline-style: none;
}

.btn.primary-btn {
    background: #348fe2;
    color: white;
    border: 0.1rem solid #348fe2;
}

.btn.lean-btn {
    padding: 0 10px;
    line-height: 18px;
    height: inherit;
    font-size: 13px;
}

.btn.primary-btn:hover {
    color: #fff;
    background-color: #40a9ff;
    border-color: #40a9ff;
}

.btn .icon {
    font-size: 2rem;
}

.tab {
    position: relative;
}

.tab > ul {
    display: flex;
    border-bottom: 0.1rem solid #EEEEEE;
    margin-bottom: 10px;
}

.tab > ul > li {
    float: left;
    font-size: 1.4rem !important;
    padding: 0.2rem 2rem !important;
    cursor: pointer;
    border-bottom: 0.3rem solid white;
    color: #999999 !important;
    margin-bottom: 0!important;
    background: white !important;
}

.tab > ul > li.active {
    border-bottom-color: #FF6600;
    color: #666666;
}

.tab > .tab-content {
    display: none;
    position: relative;
}

.tab > .tab-content.active {
    min-height: 3rem;
    display: inherit;
}

.position-relative {
    position: relative;
}

.position-right {
    position: absolute;
    right: 1rem;
    top: 0;
}

.position-right-bottom {
    position: absolute;
    right: 1rem;
    bottom: 0;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(/assets/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(/assets/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
    url(/assets/iconfont/MaterialIcons-Regular.woff) format('woff'),
    url(/assets/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 2.4rem; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
    vertical-align: middle;
}

.error {
    color: red !important;
}

.required {
    color: red;
}

.row {

}

.row > .col {
    display: inline-block;
    vertical-align: top;
    margin: 0 0.5%;
}

.row > .col-6 {
    width: 49%;
}

.row > .col-2 {
    width: 16%;
}

.row > .col-4 {
    width: 33%;
}

.row > .col-8 {
    width: 65%;
}

.row > .col-10 {
    width: 82%;
}

.tips {
    color: #999999;
}

.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 10000;
}

.fixed-center {
    width: 60rem;
    height: 40rem;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
}

.ngx-json-viewer {
    background-color: black;
}

/**
 * JSON 视图格式
 */
.ngx-json-viewer .segment .segment-main .segment-key {
    color: #94c273 !important;
    padding: 1rem;
}

.ngx-json-viewer .segment-type-string > .segment-main > .segment-value {
    color: #ce975f !important;
}

.width-100 {
    width: 100%;
}

.input {
    font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-variant: tabular-nums;
    box-sizing: border-box;
    margin: 0;
    padding: 4px 11px;
    list-style: none;
    position: relative;
    display: inline-block;
    width: 100%;
    height: 32px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0, 0, 0, .65);
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    transition: all .3s;
}

.input.input-lean {
    padding: 0 0 0 10px;
    line-height: 18px;
    height: inherit;
    width: inherit;
    font-size: 13px;
}

.input:focus {
    border-color: #40a9ff;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
    border-right-width: 1px !important;
}

.input-sm {
    width: 30rem;
}

textarea.input {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    transition: all .3s, height 0s;
    min-height: 3.2rem;
    width: auto;
}


select {
    transition: all .3s;
}

select:focus {
    border-color: #40a9ff;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
    border-right-width: 1px !important;
}

.form-row {
    margin-bottom: 1rem;
}

.ml-1 {
    margin-left: 1rem !important;
}

.ml-2 {
    margin-left: 2rem !important;
}

.mr-1 {
    margin-right: 1rem !important;
}

.mr-2 {
    margin-right: 2rem !important;
}

.mb-1 {
    margin-bottom: 1rem !important;
}

.mb-2 {
    margin-bottom: 2rem !important;
}

.mb-3 {
    margin-bottom: 3rem !important;
}

.ml-1 {
    margin-left: 1rem !important;
}

.ml-2 {
    margin-left: 2rem !important;
}

.mt-1 {
    margin-top: 1rem !important;
}

.mt-2 {
    margin-top: 2rem !important;
}

.ace-jsoneditor.ace_editor {
    font-size: 1.4rem !important;
}
